<template>
  <div class="prize-redemption">
    <div class="page-header">
      <h1>奖品兑换</h1>
      <p class="my-points">我的积分: {{ userPoints }}</p>
    </div>
    <div class="gift-list">
      <a-row :gutter="[24, 24]">
        <a-col
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
          v-for="gift in gifts"
          :key="gift.id"
        >
          <a-card hoverable class="gift-card">
            <template #cover>
              <img :src="gift.image" :alt="gift.name" />
            </template>
            <a-card-meta :title="gift.name">
              <template #description>
                <div class="gift-description">
                  <p>{{ gift.description }}</p>
                  <div class="gift-info">
                    <div class="points">
                      <trophy-outlined />
                      <span>{{ gift.points }} 积分</span>
                    </div>
                    <div class="stock">
                      <inbox-outlined />
                      <span>库存: {{ gift.stock }}</span>
                    </div>
                  </div>
                  <a-button
                    type="primary"
                    class="redeem-btn"
                    :disabled="userPoints < gift.points || gift.stock <= 0"
                    @click="handleRedeem(gift)"
                  >
                    立即兑换
                  </a-button>
                </div>
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { message } from "ant-design-vue";
import { TrophyOutlined, InboxOutlined } from "@ant-design/icons-vue";
import { listGiftsUsingGet } from "@/api/activityGiftController";

interface Gift {
  id: number;
  name: string;
  description: string;
  image: string;
  points: number;
  stock: number;
  status: number;
  createdAt: string;
  updatedAt: string;
}

interface PageResponse<T> {
  records: T[];
  total: string;
  size: string;
  current: string;
  pages: string;
}

interface ApiResponse<T> {
  code: number;
  data: T;
  message: string;
}

const gifts = ref<Gift[]>([]);
const userPoints = ref(500); // 这里需要替换为实际的用户积分获取逻辑

const convertApiGift = (apiGift: any): Gift => {
  return {
    id: Number(apiGift.id),
    name: apiGift.name || "",
    description: apiGift.description || "",
    image: apiGift.image || "",
    points: Number(apiGift.points) || 0,
    stock: Number(apiGift.stock) || 0,
    status: Number(apiGift.status) || 0,
    createdAt: apiGift.createdAt || "",
    updatedAt: apiGift.updatedAt || "",
  };
};

const fetchGifts = async () => {
  try {
    const response = await listGiftsUsingGet({});
    if (response.data.code === 0 && response.data.data?.records) {
      gifts.value = response.data.data.records.map(convertApiGift);
    } else {
      gifts.value = [];
    }
  } catch (error) {
    console.error("获取礼品列表失败:", error);
    message.error("获取礼品列表失败");
    gifts.value = [];
  }
};

const handleRedeem = async (gift: Gift) => {
  try {
    // TODO: 调用兑换接口
    message.success(`兑换 ${gift.name} 成功！`);
  } catch (error) {
    message.error("兑换失败，请稍后重试");
  }
};

onMounted(() => {
  fetchGifts();
});
</script>

<style scoped>
.prize-redemption {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 24px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  background: white;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.page-header h1 {
  color: #333;
  margin: 0;
  font-size: 24px;
}

.my-points {
  color: #ff4d4f;
  font-size: 18px;
  font-weight: bold;
}

.gift-list {
  padding: 8px;
}

.gift-card {
  transition: all 0.3s ease;
  height: 100%;
}

.gift-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.gift-card :deep(.ant-card-cover) {
  height: 200px;
  overflow: hidden;
}

.gift-card :deep(.ant-card-cover) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gift-card:hover :deep(.ant-card-cover) img {
  transform: scale(1.05);
}

.gift-description {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gift-description p {
  color: #666;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 40px;
}

.gift-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0;
}

.points,
.stock {
  display: flex;
  align-items: center;
  gap: 4px;
}

.points {
  color: #ff4d4f;
  font-weight: bold;
}

.stock {
  color: #52c41a;
}

.redeem-btn {
  width: 100%;
  margin-top: 8px;
}

.redeem-btn[disabled] {
  background-color: #f5f5f5;
  color: #d9d9d9;
  border-color: #d9d9d9;
}

@media (max-width: 576px) {
  .prize-redemption {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .gift-card :deep(.ant-card-cover) {
    height: 160px;
  }
}
</style>
